<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="btn">生成100000个节点</div>
    <script>
      const btn = document.querySelector(".btn");
      // btn.onclick = () => {
      //   for (let i = 0; i < 100000; i++) {
      //     const div = document.createElement('div')
      //     div.innerText = i
      //     document.body.appendChild(div)
      //   }
      // } 

      const datas = new Array(100000).fill(0).map((item, index) => index);
      btn.onclick = () => {
        const taskHandler = (data, i) => {
          const div = document.createElement("div");
          div.innerText = data;
          document.body.appendChild(div);
        };
        // const scheduler = (task) => {
        //   setTimeout(() => {
        //     const start = Date.now();
        //     task(() => Date.now() - start < 50);
        //   }, 100);
        // };
        const scheduler = (task)=>{
          requestIdleCallback(idle=>{
            task(idle.timeRemaining()>0)
          })
        }
        performChunk(datas, taskHandler, scheduler);
        // performChunk(100000,taskHandler);
      };
      function performChunk(datas, taskHandler, scheduler) {
        // 参数归一化
        if (typeof datas === "number") {
          datas = { length: datas };
        }
        if (datas.length === 0) return;
        let i = 0;
        // 执行下一个任务
        function _run() {
          if (i >= datas.length) return;
          // 这两种方法看似一样，但是效果不同，
          // 第一种会在所有的节点生成完了之后再绘制到页面上
          // 第二种会生成一批就绘制一批
          // 产生差异的原因尚不清楚，明明都用了requestIdleCallback
          // scheduler((isGoOn) => {
          //   while (isGoOn && i < datas.length) {
          //     taskHandler(datas[i], i);
          //     i++;
          //   }
          //   _run();
          // });
          requestIdleCallback(idle=>{
            while (idle.timeRemaining()>0 && i < datas.length) {
              taskHandler(datas[i], i);
              i++;
            }
            _run();
          })
        }
        _run();
      }
    </script>
  </body>
</html>
